<template>
  <el-dialog :model-value="true" title="新增套餐" width="50%" @close="emits('close')">
    <el-form :model="queryParams" label-width="160px" ref="formRef" :rules="rules">
      <el-form-item label="套餐名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入套餐名称" />
      </el-form-item>
      <!-- 副标题 -->
      <el-form-item label="副标题" prop="subTitle">
        <el-input v-model="queryParams.subTitle" placeholder="请输入副标题" />
      </el-form-item>
      <!-- 套餐所属产品分类 -->
      <el-form-item label="商品分类" prop="productCategoryId">
        <el-cascader
          v-model="queryParams.productCategoryId"
          :options="categoryList"
          :props="defaultProps"
          class="w-1/1"
          clearable
          filterable
          @change="getProductList"
          placeholder="请选择商品分类"
        />
      </el-form-item>
      <el-form-item label="套餐所属产品" prop="productId">
        <el-select v-model="queryParams.productId" placeholder="请选择套餐所属产品">
          <el-option
            v-for="item in productList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 指令select -->
      <el-form-item label="指令" prop="commands">
        <el-select
          v-model="queryParams.commands"
          multiple
          collapse-tags
          :max-collapse-tags="6"
          placeholder="请选择指令"
        >
          <el-option
            v-for="item in commandList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="是否开启体验">
        <el-switch
          v-model="queryParams.trialed"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
      <!-- 套餐是否开启 -->
      <el-form-item label="套餐是否开启">
        <el-switch
          v-model="queryParams.enabled"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
      <!-- 颜色选择器 -->
      <el-form-item label="套餐背景色">
        <el-color-picker v-model="queryParams.color" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="emits('close')">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getCategoryList } from '@/api/localLife/category'
import { defaultProps, handleTree } from '@/utils/tree'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { SofaBasicApi } from '@/api/application/sofa/index'
const emits = defineEmits(['close', 'submit'])
const props = withDefaults(
  defineProps<{
    title?: string
    editInfo?: any
  }>(),
  {
    title: '新增套餐',
    editInfo: () => ({})
  }
)
const formRef = ref<any>(null)
const queryParams = ref({
  name: '',
  productId: undefined,
  commands: [] as any,
  trialed: true,
  enabled: true,
  productCategoryId: undefined,
  subTitle: '',
  color: '#ffffff' // 默认颜色
})
const commandList = ref<any>([])
const categoryList = ref<any>([])
const productList = ref<any>([])
const rules = ref({
  name: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }],
  subTitle: [{ required: true, message: '请输入副标题', trigger: 'blur' }],
  // productCategoryId: [{ required: true, message: '请选择套餐所属产品分类', trigger: 'blur' }],
  // productId: [{ required: true, message: '请选择套餐所属产品', trigger: 'blur' }],
  commands: [{ required: true, message: '请输入指令', trigger: 'blur' }]
})
const handleSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      queryParams.value.commands = queryParams.value.commands.join(',')
      emits('submit', { ...queryParams.value, id: props.editInfo.id })
    }
  })
}
const getCategory = async () => {
  const list = await getCategoryList({})
  categoryList.value = handleTree(list, 'id', 'parentId')
}
const getProductList = async () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    tabType: 0,
    categoryId: queryParams.value.productCategoryId,
    productType: 'TIME_CARD' as string | undefined
  } // 查询参数
  const { list } = await ProductSpuApi.getSpuPage(params)
  queryParams.value.productId = undefined
  productList.value = list
}
const getCommandList = async () => {
  const data = await SofaBasicApi.getDeviceCommandList({ pageNo: 1, pageSize: 100 })
  commandList.value = data
}
const getEditInfo = () => {
  if (props.editInfo.id) {
    queryParams.value.name = props.editInfo.name || ''
    queryParams.value.productCategoryId = props.editInfo.productCategoryId || undefined
    queryParams.value.productId = props.editInfo.productId || undefined
    queryParams.value.subTitle = props.editInfo.subTitle || ''
    queryParams.value.color = props.editInfo.color || '#ffffff'
    queryParams.value.commands = props.editInfo.commands.split(',') || []
    queryParams.value.trialed = props.editInfo.trialed
    queryParams.value.enabled = props.editInfo.enabled
  }
}
onMounted(async () => {
  await getCategory()

  if (props.editInfo.productCategoryId) {
    await getProductList()
  }
  await getEditInfo()
  await getCommandList()
})
</script>
